<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态表情</title>
  <script src="../vue.js"></script>
</head>
<style>
  .smile-wrap {
    margin: auto;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fff 0%,#f9ad13 100%);
    width: 350px;
    height: 350px;
    box-shadow: inset -5px 5px 8px #f7a443, inset -5px -5px 8px #ee9131, inset 5px -5px 8px #ef8d27, inset 5px 5px 8px #f1a659;
  }

  .eye-wrap {
    margin-left: 30px;
    display: flex;
    justify-content: space-evenly;
    width: 290px;
    padding-top: 70px;
  }

  .eye {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
  }

  .eye:after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background: #323231;
    transform: translate(-50%, -50%);
    position: relative;
    top: 35%;
    border-radius: 50%;
    left: 33px;
  }

  .mouth {
    width: 155px;
    height: 60px;
    border-radius: 0 0 60px 60px;
    margin-left: 96px;
    margin-top: 75px;
    background: #ce8a39;
    transition: .5s;
    /* box-shadow: 0 0px 0 rgb(255 255 255 / 20%) inset, 0 -10px 0 rgb(151 92 21 / 70%) inset; */
  }

  .mouth.active {
    border-radius: 0;
    height: 30px;
  }
</style>
<body>
  <div id="app">
    <div class="smile-wrap">
      <div class="eye-wrap">
        <div class="eye"></div>
        <div class="eye"></div>
      </div>
      <div></div>
    </div>
  </div>
</body>
</html>